<!DOCTYPE HTML>
<html>
<body>
<script src="../resources/js-test.js"></script>

<div>
  <a id="link1" href="#">Link</a>
  <button id="button1">Button</button>
  A<input id="text1" type="text" value="Value">
  B<input id="text-readonly1" type="text" value="Value" readonly>
  C<input id="text-readonly2" type="text" value="Value" readonly aria-readonly="false">
  D<input id="checkbox1" type="checkbox" checked>
  E<input id="number1" type="number" value="123">
  F<input id="radio1" type="radio" checked>
  G<input id="slider1" type="range" min="1" max="10" value="5">
  H<input id="submit1" type="submit">
  I<select id="combobox1"><option>1<option selected>2</select>
  J<select multiple id="listbox1"><option>1<option selected>2</select>
  K<textarea id="textarea1">Textarea</textarea>
  L<textarea id="textarea-readonly1" readonly>Textarea</textarea>
  M<div id="focusable1" tabindex="0">Focusable</div>
  <h5 id="heading1" tabindex="0">Heading</h5>
  <div id="div1" tabindex="0" aria-readonly="true">Plain div can't be readonly</div>
  <div id="aria-button1" tabindex="0" role="button" aria-readonly="false">ARIA button</div>
  <div id="aria-togglebutton1" tabindex="0" role="button" aria-pressed="false">ARIA toggle button</div>
  <div id="aria-link1" tabindex="0" role="link">ARIA link</div>
  <div id="aria-slider1" tabindex="0" role="slider" aria-readonly="true">ARIA slider</div>
  <div id="aria-progress1" tabindex="0" role="progressbar" aria-readonly="true">ARIA progress meter</div>
  <div id="contenteditable_root1" contentEditable>
    <button id="contenteditable_button1">Button</button>
  </div>
  <div id="contenteditable_root-readonly1" contentEditable aria-readonly="true">
  </div>
  <div id="contenteditable_root-readonly2" role="textbox" contentEditable aria-readonly="true">
  </div>

</div>

<div id="console"></div>
<script>
description("This tests which elements expose themselves as readonly. Readonly here refers to whether the item is not editable, not whether a control value can be changed vs if it's unavailable.");

if (window.testRunner && window.accessibilityController) {
    testRunner.dumpAsText();

    function check(id, expected_readonly) {
        debug(id);
        window.element = document.getElementById(id);
        element.focus();
        shouldBe("document.activeElement == element", "true");
        window.axElement = accessibilityController.focusedElement;

        shouldBe("axElement.isReadOnly", "" + expected_readonly);
        debug("");
    }

    check("link1", false);
    check("button1", false);
    check("text1", false);
    check("text-readonly1", true);
    check("text-readonly2", false);
    check("checkbox1", false);
    check("number1", false);
    check("radio1", false);
    check("slider1", false);
    check("submit1", false);
    check("combobox1", false);
    check("listbox1", false);
    check("textarea1", false);
    check("textarea-readonly1", true);
    check("focusable1", false);
    check("heading1", false);
    check("div1", false);
    check("aria-button1", false);
    check("aria-togglebutton1", false);
    check("aria-link1", false);
    check("aria-slider1", true);
    check("aria-progress1", false);
    check("contenteditable_root1", false);
    check("contenteditable_button1", false);
    // This is correct according to ARIA spec, as aria-readonly is supported
    // on specific roles only -- it is not a universal ARIA property.
    check("contenteditable_root-readonly1", false);
    check("contenteditable_root-readonly2", true);
}

</script>

</body>
</html>
